<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置</title>
    <link href="../css/font-awesome.css" rel="stylesheet" type="text/css" />
    <script src="autojs://sdk/v1.js"></script>
    <script src="../js/jquery-3.6.1.min.js"></script>
    <style type="text/css">
        body{font-family:arial;min-width:320px;max-width:750px;height:100vh; font-size:.32rem;margin:0 auto;padding:0;background:#F1F2E5;color:#333;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0);word-wrap:break-word;word-break:break-all}
        /* div{margin:0 auto;padding:0} */
        ul,li,h1,h2,h3,h4,p,dl,dd,dt{margin:0;padding:0;font-weight:normal}
        i{font-style:normal;}
        li{list-style:none}
        a{text-decoration:none}
        img{display:block;width:100%;border:0}
        .hash{height: .25rem;width: 100%;}

        .titleBar {background: #F1F2E5;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;width:7.5rem;height:1rem;float: left;z-index: 10;position:fixed;top:0;}
        .titleBar .lv_back  {width: .52rem; height: .48rem; margin-left: .3rem;}
        .titleBar .lv_right {width: .52rem; height: .48rem; margin-right: .3rem;}

        .main {padding: 1rem .3rem 0; }
        .main dl dt {font-size: .36rem;font-weight: bold;margin-top: .15rem;}
        .main dl dd {margin-top: .15rem; background: #FFFFFF;padding: .1rem 0;
            box-shadow:0 0 .25rem 0 rgba(0,0,0,0.5); border-radius:.20rem;
        }
        .main dl dd ul {margin-left: .3rem; margin-right: .3rem;}
        .main dl dd ul li {width: 100%; display: flex;flex-direction: row;justify-content: space-between;margin: .1rem 0;align-items: center;}

        .mui-switch{width:.52rem;height:.31rem;position:relative;border:.01rem solid #dfdfdf;background-color:#fdfdfd;box-shadow:#dfdfdf 0 0 0 0 inset;border-radius:.20rem;border-top-left-radius:.20rem;border-top-right-radius:.2rem;border-bottom-left-radius:.2rem;border-bottom-right-radius:.2rem;background-clip:content-box;display:inline-block;-webkit-appearance:none;user-select:none;outline:none}
        .mui-switch:before{content:'';width:.29rem;height:.29rem;position:absolute;top:0;left:0;border-radius:.20rem;border-top-left-radius:.20rem;border-top-right-radius:.20rem;border-bottom-left-radius:.20rem;border-bottom-right-radius:.20rem;background-color:#fff;box-shadow:0 .01rem .03rem rgba(0,0,0,0.4)}
        .mui-switch:checked{border-color:#64bd63;box-shadow:#64bd63 0 0 0 .16rem inset;background-color:#64bd63}
        .mui-switch:checked:before{left:.21rem}
        .mui-switch.mui-switch-anim{transition:border cubic-bezier(0,0,0,1) 0.4s,box-shadow cubic-bezier(0,0,0,1) 0.4s}
        .mui-switch.mui-switch-anim:before{transition:left 0.3s}
        .mui-switch.mui-switch-anim:checked{box-shadow:#64bd63 0 0 0 .16rem inset;background-color:#64bd63;transition:border ease 0.4s,box-shadow ease 0.4s,background-color ease 1.2s}
        .mui-switch.mui-switch-anim:checked:before{transition:left 0.3s}

        .scriptconfig span {display: flex;flex-direction: row;align-items: center;margin:.15rem 0}
        .scriptconfig span input {width: .6rem; margin-left: .3rem;margin-right: .3rem; text-align:center;}
        .scriptconfig span .choice {margin-left: 0rem;margin-right: 0rem;}
        .scriptconfig span textarea {min-height: .4rem;min-width: 4.3rem; max-width: 4.3rem; width: 4.3rem; height: .4rem; margin-left: .3rem; font-size: .28rem; padding: 0;}
        /* .msgbox{margin-left: .15rem;} */
        
        #savedata {display: none;}
        .savedata .savebutton{color:#FFFFFF;background:#58b956;font:bold .26rem Montserrat;text-align:center;border:.02rem solid rgb(181, 123, 123);border-radius:.15rem;display:block;padding:.2rem 0;width:60%;cursor:pointer;text-transform:uppercase;margin: .45rem auto;}
        
        /* 弹窗 (background) */
        .modal{display:none;position:fixed;z-index:1;padding-top:5rem;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
        .modal-content{position:relative;background-color:#F1F2E5;margin:auto;padding:0;width: 80%;
            border:.01rem solid #888;width:80%;border-radius:.15rem;
            box-shadow:0 .04rem .08rem 0 rgba(0,0,0,0.2),0 .06rem .2rem 0 rgba(0,0,0,0.19);
        -webkit-animation-name:animatetop;-webkit-animation-duration:0.4s;animation-name:animatetop;animation-duration:0.4s}
        @-webkit-keyframes animatetop{from{top:-3rem;opacity:0} to{top:0;opacity:1}}
        @keyframes animatetop{from{top:-3rem;opacity:0} to{top:0;opacity:1}}
        .close{color:#333;float:right;font-size:.42rem;font-weight:bold;position: absolute;z-index: 10;right: .3rem;}
        .close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}
        .modal-header{background-color:#F1F2E5;border-radius:.15rem;color:#333;font-size: .26rem;text-align: center;margin-top: .3rem;}
        .modal-body{color:#333; height: 2.6rem;margin-top: .15rem; display: flex;flex-direction: column;align-items: center;}

    </style>
</head>
<body>
    <script type="text/javascript">
        document.documentElement.style.webkitUserSelect = 'none';
        var windowWidth = document.body.clientWidth;
        var _fontSize = windowWidth / 750 * 100;
        var documentHtml = document.getElementsByTagName( 'html' )[ 0 ];
        documentHtml.style.fontSize = _fontSize + 'px';
      
        var remHtml = document.createElement( 'div' );
        remHtml.className = 'rem-width';
        remHtml.style.width = '1rem';
        remHtml.style.height = '1px';
        remHtml.style.opacity = '0';
        remHtml.style.margin = '0';
        document.body.appendChild( remHtml );
        var remSizeRatio = document.getElementsByClassName( 'rem-width' )[ 0 ].offsetWidth / _fontSize;
        var remSizeNum = document.getElementsByClassName( 'rem-width' )[ 0 ].offsetWidth - _fontSize;
        var remSize = remSizeRatio.toFixed( 2 );
        if( remSize != 1 && Math.abs( remSizeNum ) > 1 ){
          _fontSize = _fontSize / remSizeRatio;
          documentHtml.style.fontSize = _fontSize + 'px';
        }
        document.body.removeChild( document.getElementsByClassName( 'rem-width' )[ 0 ]);
    </script>
    <div class="titleBar">
        <div class="lv_back">
            <i class="fa fa-angle-left" style="font-size:.48rem"></i>
        </div>
        <span class="titleText">SETTING</span>
        <div class="lv_right">
            <i style="font-size:.32rem;font-weight:bold;">···</i>
        </div>
    </div>
    <div class="main">
        <dl>
            <dt>权限状态</dt>
            <dd>
                <ul>
                    <li><i>忽略电池优化(未实现)</i><label><input value="0" class="mui-switch mui-switch-anim" type="checkbox"></li>
                    <li><i>悬浮窗权限(未实现)</i><label><input value="0" class="mui-switch mui-switch-anim" type="checkbox"></li>
                    <li><i>音量上键停止运行(未实现)</i><label><input value="0" class="mui-switch mui-switch-anim" type="checkbox"></li>
                </ul>
            </dd>
            <dt>数据配置</dt>
            <dd>
                <ul>
                    <li>
                        <div class="scriptconfig">
                            <span>运行时长: <input type="number" id="runTimes" maxlength="3" class="autocomplete" name="contact"/>分钟</span>
                            <span>运行次数: <input type="number" id="runCounts" maxlength="3" class="autocomplete" name="contact"/>次</span>
                            <span>文本配置</span>
                            <span>文本一:<textarea id="msg1" class="msgbox" name="contact" placeholder=""></textarea></span>
                            <span>文本二:<textarea id="msg2" class="msgbox" name="contact" placeholder=""></textarea></span>
                            <span>文本三:<textarea id="msg3" class="msgbox" name="contact" placeholder=""></textarea></span>
                            <span>排除性别:
                                <input type="radio" id="contactChoice0" class="choice" name="contact" checked="checked" value="2">
                                <label for="contactChoice0">不排除</label>
                                <input type="radio" id="contactChoice1" class="choice" name="contact" value="1">
                                <label for="contactChoice1">男</label>
                                <input type="radio" id="contactChoice2" class="choice" name="contact" value="0">
                                <label for="contactChoice2">女</label>
                            </span>
                        </div>
                    </li>
                </ul>
            </dd>
        </dl>
        <div class="savedata" >
            <input type="checkbox" id="savedata" />
            <label class="savebutton" for="savedata">Save</label>
        </div>
    </div>
    <!-- 页面保存成功弹窗 -->
    <div id="successAlert" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <span class="close"><i class="fa fa-times" aria-hidden="true"></i></span>
                <h2>保存配置</h2>
            </div>
            <div class="modal-body">
                <i class="fa fa-check-circle" aria-hidden="true" style="font-size: 1.8rem; color: #58b956;"></i>
                <p>配置保存成功</p>
            </div>
        </div>
    </div>

    <script>
        var settingOption = {}
        var $jq = jQuery.noConflict();
        $jq( function() {
            //从本都存储中获取配置并填充
            let config = localStorage.getItem( "dataOpt" );
            try {
                configJson = JSON.parse( config );
                if ( config ) {
                    $jq( "#runTimes" ).val( configJson.runTimes );
                    $jq( "#runCounts" ).val( configJson.runCounts );
                    $jq( "#msg1" ).val( configJson.msg1 );
                    $jq( "#msg2" ).val( configJson.msg2 );
                    $jq( "#msg3" ).val( configJson.msg3 );
                    switch( configJson.shutOut ) {
                        case "0" : {
                            $jq( "#contactChoice2" ).prop( "checked", true );
                            break
                        }
                        case "1" : {
                            $jq( "#contactChoice1" ).prop( "checked", true );
                            break
                        }
                        case "2" : {
                            $jq( "#contactChoice0" ).prop( "checked", true );
                            break
                        }
                    }
                } else {
                    console.log( "没有保存过配置" );
                }
            } catch ( e ) {
                console.log( "读取配置错误,需要重新保存" );
            }
            // 获取弹窗
            var modal = document.getElementById('successAlert');
            var span = document.getElementsByClassName("close")[0];
            span.onclick = function() {
                modal.style.display = "none";
            }
            window.onclick = function(event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            }
            //保存数据
            $jq( ".savebutton" ).click( function() {
                let runTimes = $jq( "#runTimes" ).val();
                let runCounts = $jq( "#runCounts" ).val();
                let msg1 = $jq( "#msg1" ).val();
                let msg2 = $jq( "#msg2" ).val();
                let msg3 = $jq( "#msg3" ).val();
                let shutOut = $jq("input[class='choice']:checked").val();
                settingOption.runTimes = runTimes;
                settingOption.runCounts = runCounts;
                settingOption.msg1 = msg1;
                settingOption.msg2 = msg2;
                settingOption.msg3 = msg3;
                settingOption.shutOut = shutOut;
                localStorage.setItem( "dataOpt", JSON.stringify( settingOption ) )
                modal.style.display = "block";
            } );
            //根据页面body的背景色来设置安卓任务栏的颜色
            let bgColor = $jq( "body" ).css( "background-color" );
            $autojs.invoke( "setStatusBarColor", bgColor );
            //点击返回按钮,返回上一页
            $jq( ".lv_back" ).click( function() {
                window.history.back();
            } );
            $jq( ".lv_right" ).click( function() {
                localStorage.removeItem( "dataOpt" );
                location.reload();
            } );
            //给话术输入框添加监听事件,输入超过一行时,自动增加高度
            let inputObj = $jq( ".msgbox" );
            for ( let i = 0; i < inputObj.length; i++ ) {
                inputObj[i].addEventListener( "input", function( e ) {
                    this.style.height = '.42rem';
                    this.style.height = e.target.scrollHeight + 'px';
                } )
            } 
        } );
    </script>
</body>
</html>
